<template>
  <div class="padding-class">
    <el-card
      v-for="(teacher,index) in teachers"
      style="width: 150px; float: left;margin-right: 20px;margin-bottom: 20px"
      :body-style="{ padding: '0px' }"
    >
      <img style="width: 150px;height: 150px" :src="baseUrl + teacher.headPicUrl" class="image" @click="catDetail(index)">
      <div style="text-align: center;padding: 14px">
        <span><template>{{ teacher.teacherName }}</template></span>
      </div>
    </el-card>

    <el-dialog
      title="教师信息"
      :visible.sync="showTeacher"
      width="30%"
      center
    >
      <el-form ref="teacherInfo" :model="teacherInfo" label-width="100px">
        <el-form-item label="教师姓名:">
          <el-input v-model="teacherInfo.teacherName" readonly class="catCat" />
        </el-form-item>
        <el-form-item label="头像：">
          <img style="width: 100px; height: 100px" :src="baseUrl +teacherInfo.headPicUrl">
        </el-form-item>
        <el-form-item label="班主任:">
          <el-input v-model="teacherInfo.headTeacher? '是' : '否'" readonly class="catCat" />
        </el-form-item>
        <el-form-item label="联系电话：">
          <el-input v-model="teacherInfo.teacherPhoneNumber" readonly class="catCat" />
        </el-form-item>
        <el-form-item label="教师简介：">
          <el-input v-model="teacherInfo.teacherIntroduction" readonly class="catCat" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showTeacher = false">关闭</el-button>
        <!--    <el-button type="primary" @click="doUpdate">提交</el-button>-->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { preinstallInfo, updateTeacherInfo } from '@/api/teachersIntroduce'

export default {
  name: 'Teachers',
  data() {
    return {
      baseUrl: this.global.picBaseUrl,
      teachers: [],
      teacherInfo: {
        tid: '',
        teacherName: '',
        className: '',
        headPicUrl: '',
        headTeacher: '',
        jobNumber: '',
        teacherPhoneNumber: ''
      },
      showTeacher: false,
      imageUrl: ''
    }
  },
  created() {
    this.getTeachers()
  },
  methods: {
    getTeachers() {
      preinstallInfo({
        pageNum: '1',
        pageSize: '100'
      }).then(res => {
        this.teachers = res.data.list
      }).catch(err => {
      })
    },
    catDetail(index) {
      this.showTeacher = true
      this.teacherInfo = this.teachers[index]
    },
    doUpdate() {
      updateTeacherInfo({ ...this.teacherInfo }).then(res => {
        this.$message.success('修改成功！')
        this.showTeacher = false
        this.getTeachers()
      }).catch(err => {
        this.$message.error('请求失败！')
        this.showTeacher = false
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
  .padding-class {
    padding: 20px;
  }
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }

  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }

  .catCat {
    width: 200px;
  }

  .catCat input.el-input__inner {
    border: none;
  }
</style>
